<template>
  <el-table
    ref="table"
    :data="data"
    :v-loading="loading"
    :max-height="maxHeight"
    border
    style="width: 100%"
    element-loading-text="拼命加载中"
    @sort-change="sortChange"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="select"
      type="selection"
      align="center"
    />
    <template v-for="(col,index) in tableTitle">
      <el-table-column
        v-if="col.type==='img'"
        :key="index"
        :prop="col.en"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div
            :style="'background:url('+scope.row[col.en]+') center /cover no-repeat ; width:50px;height:50px;margin:0 auto'"/>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.progress"
        :key="index"
        :prop="col.en"
        :label="col.cn"
        :sortable="col.sortable?'custom':false"
        :width="col.width||'auto'"
        align="center"
      >
        <template v-if="col.progress" slot-scope="scope">
          <el-progress :stroke-width="10"  :percentage="Number(scope.row[col.en])" :color="((scope.row[col.en]-100)<0)&&'#409EFF'||'rgba(255, 140, 0, 1)'"></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.type==='phone'"
        :key="index"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row[col.en][0].telNum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.type==='money'"
        :key="index"
        :label="col.cn"
        :width="col.width||'auto'"
        align="center"
      >
        <template slot-scope="scope">
          <div @click="showInput(scope.row,scope.row[col.en],scope.$index)">
            <span v-if="!scope.row.inputVisible">
              {{ scope.row[col.en] }}
            </span>
            <el-input
              v-else
              v-model="inputValue"
              :ref="'saveTableInput'+scope.$index"
              size="mini"
              @blur="hiddenInput(scope.row,col.en)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :sortable="col.sortable?'custom':false"
        :key="index"
        :prop="col.en"
        :label="col.cn"
        :width="col.width||'auto'"
        :formatter="col.formatter"
        align="center"
      >
      </el-table-column>
    </template>

    <el-table-column
      v-if="defaultOperate"
      :min-width="width"
      :max-width="width"
      label="操作"
      align="center"
    >
      <template slot-scope="scope">
        <el-button v-if="readable" :class="btnClass" type="info" size="mini" @click="emit('read',scope)">查看
        </el-button>
        <el-button v-if="recoverable" :class="btnClass" type="info" size="mini" @click="emit('recover',scope)">
          撤回
        </el-button>
        <el-button
          v-if="scope.row.rolename!=='Administrator1'&&editable"
          :class="btnClass"
          size="mini"
          @click="emit('edit',scope)">{{editTitle||'修改'}}
        </el-button>
        <el-button v-if="addable" :class="btnClass" type="primary" size="mini" @click="emit('add',scope)">添加
        </el-button>
        <el-button v-if="usable" :class="btnClass" type="primary" size="mini" @click="emit('use',scope)">选择
        </el-button>
        <el-button
          v-if="scope.row.rolename!=='Administrator'&&deletable"
          :class="btnClass"
          type="danger"
          size="mini"
          @click="emit('del',scope)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
    props: {
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      },
      tableTitle: {
        type: Array,
        default: () => {
          return []
        }
      },
      editPath: {
        type: String,
        default: ''
      },
      editTitle: {
        type: String,
        default: ''
      },
      editable: {
        type: Boolean,
        default: true
      },
      select: {
        type: Boolean,
        default: false
      },
      deletable: {
        type: Boolean,
        default: true
      },
      defaultOperate: {
        type: Boolean,
        default: true
      },
      readable: {
        type: Boolean,
        default: false
      },
      addable: {
        type: Boolean,
        default: false
      },
      usable: {
        type: Boolean,
        default: false
      },
      recoverable: {
        type: Boolean,
        default: false
      },
      delConfirm: {
        type: Boolean,
        default: true
      },
      loading: {
        type: Boolean,
        default: false
      },
      btnClass: {
        type: String,
        default: () => ''
      },
      width: {
        type: String,
        default: () => '120px'
      },
      maxHeight: {
        type: [String, Number],
        default: () => {
          const height = document.body.clientHeight;
          return height * 0.8
        }
      }
    },
    data() {
      return {
        inputVisible: false,
        inputValue: '',
        timer:null
      }
    },
    computed: {
      data() {
        this.tableData.forEach(item1 => {
          this.tableTitle.forEach(item2 => {
            if (item2.type === 'money') {
              const status = (!item1[item2.en] && item1[item2.en] !== 0)
              this.$set(item1, 'inputVisible', status)
            }
          })
        })
        return this.tableData
      }
    },
    watch: {
      tableData(val) {
         this.$refs.table.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
     }
    },
    methods: {
      sortChange(props) {
        this.emit('sortChange', props)
      },
      showInput(item, val, index) {
        console.log(item, val, index)
        this.inputValue = val
        item.inputVisible = true
        this.$nextTick(_ => {
          this.$refs['saveTableInput' + index][0].$refs.input.focus()
        })
      },
      hiddenInput(item, key) {
        item.inputVisible = false
        if (this.inputValue !== '' && this.inputValue !== 0) {
          item[key] = Number(this.inputValue)||0
        } else {
          item[key] = 0
        }
        this.inputValue = ''
      },

      emit(event, val) {
        if (event === 'del' && this.delConfirm) {
          this.$confirm('是否删除该条信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$emit(event, val)
          }).catch(() => {
            return this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$emit(event, val)
        }
      },
      handleSelectionChange(val) {
        this.$emit('selectionChange', val)
      }
    }
  }
</script>

<style scoped>
  .el-table__body-wrapper{
    scroll-behavior: smooth;
  }
</style>
